<template>
  <div class="wrap">
    <!-- <button v-if="state != 0" @click="submitExcel">提交</button> -->
    <el-button
          @click="submitExcel"
          type=""
          icon=""
          class="anniu"
          v-if="state != 0"
          >提交</el-button
        >
    <header>
      <div class="header">现金流量表</div>
      <div class="bottom">
        <div class="company">
          编制单位：
          <span @dblclick="isTableHeader = false" v-if="isTableHeader">{{
            headerData.companyName
          }}</span>
          <span v-else
            ><el-input
              @keyup.enter.native="isTableHeader = true"
              @blur="isTableHeader = true"
              v-model="headerData.companyName"
          /></span>
        </div>
        <div class="company-time">
          <div
            style="width: 100%; flex: 1"
            @dblclick="isCompanyTime = false"
            v-if="isCompanyTime"
          >
            {{ headerData.companyTimeArr[0] }} 至
            {{ headerData.companyTimeArr[1] }}
          </div>
          <div style="width: 100%; flex: 1" v-else>
            <el-date-picker
              @blur="isCompanyTime = true"
              v-model="companyTimeArr"
              type="daterange"
              range-separator="至"
              value-format="yyyy年MM月dd日"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div>单位：{{ headerData.unit }}</div>
      </div>
    </header>
    <ExcelCom
      :title="itemData"
      :hot="hotData"
      :footer="footerData"
    />
    <div style="height: 111px"></div>
  </div>
</template>
    <script>

import { queryReport, addReport, getReportDetail } from "@/api/shenji";
import ExcelCom from "@/components/ExcelCom"

export default {
  props: ["state", "cashData"],
  components: {
    // 注册组件
    ExcelCom
  },
  name: "exceljs-demo",

  data() {
    return {

      headerData: {
        companyName: "万科企业股份有限公司",
        companyTimeArr: ["2022年11月01日", "2022年12月11日"],
        unit: "元",
      },

      footerData: [
        ["经办人：", "受理人："],
        ["经办人证件类型：", "受理人税务机关："],
        ["经办人证件号码：", "受理日期："],
        ["代理机构：", ""],
        ["申报日期：", ""],
      ],

      hotData: [
        {
          program: "一、经营活动产生的现金流量：",
          rowCount: "",
          yearMoney: "",
          lastYearMoney: "",
        },
        {
          program: "销售产成品、商品、提供劳务收到的现金",
          rowCount: 1,
          yearMoney: 7987,
          lastYearMoney: 7987,
        },
        {
          program: " 收到其他与经营活动有关的现金 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "购买原材料、商品、接受劳务支付的现金 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "支付的职工薪酬",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "支付的税费",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "支付其他与经营活动有关的现金",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "经营活动产生的现金流量净额",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "经营活动产生的现金流量净额 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "二、投资活动产生的现金流量：",
          rowCount: "",
          yearMoney: "",
          lastYearMoney: "",
        },
        {
          program: " 收回短期投资、长期债券投资和长期股权投资收到的现金",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "取得投资收益收到的现金 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "处置固定资产、无形资产和其他非流动资产收回的现金净额",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "短期投资、长期债券投资和长期股权投资支付的现金 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "购建固定资产、无形资产和其他非流动资产支付的现金",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "投资活动产生的现金流量净额 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "三、筹资活动产生的现金流量：",
          rowCount: "",
          yearMoney: "",
          lastYearMoney: "",
        },
        {
          program: "取得借款收到的现金 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "  吸收投资者投资收到的现金",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "偿还借款本金支付的现金",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "  偿还借款利息支付的现金",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "分配利润支付的现金",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: " 筹资活动产生的现金流量净额 ",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "四、现金净增加额",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "加：期初现金余额",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
        {
          program: "五、期末现金余额",
          rowCount: "1",
          yearMoney: "798,700.00",
          lastYearMoney: "798,700.00",
        },
      ],
      itemData: [
        {
          title: "项目",
          name: "program",
        },
        {
          title: "行次",
          name: "rowCount",
        },
        {
          title: "本年累计金额",
          name: "yearMoney",
        },
        {
          title: "上年累计金额",
          name: "lastYearMoney",
        },
      ],
      cash: "",


      isTableHeader: true,
      isCompanyTime: true,
year:"",
    };
  },
  created() {
    // console.log(this.$route.query)
    this.year = this.$route.query.year
    // console.log("cashData",this.cashData);
    if (this.cashData && this.$route.query.state == 0) {
      this.cash = JSON.parse(this.cashData);
      // console.log("1111232323asdas",this.cash);
      this.headerData = this.cash.headerExcel
      this.footerData = this.cash.footerExcel
      this.hotData = this.cash.mainExcel
    }
  },
  mounted() {

    // this.$emit('getExcel',{headerExcel:this.headerData,mainExcel:this.hotData,footerExcel:this.footerData})
  },
  methods: {
    async submitExcel() {
      let result = await addReport({
        xianjin: JSON.stringify({
          headerExcel: this.headerData,
          mainExcel: this.hotData,
          footerExcel: this.footerData,
        }),
        year:this.year
      })
      //  console.log("现金result",result);
       if(result.data.code==1){
          this.$message({
            showClose: true,
            message: result.data.msg,
            type: "success",
          });
          // this.erci="刷新认证状态"
        } else {
          this.$message({
            showClose: true,
            message: result.data.msg,
            type: "error",
          });
        }
       
    }
  },
};
</script>
    <style scope lang="scss">
.wrap {
  margin: auto;
  // width: 800px;
  width: 1260px;
  .header {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    border: none;
  }
  .bottom {
    margin: 20px 0 2px;
    display: flex;
    justify-content: space-evenly;
    div {
      // padding-left:px;
      flex: 1;
    }
  }
  .bottom > div:last-of-type {
    flex: 0.5;
    text-align: right;
  }
}
.company,
.company-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  div {
    text-align: left !important;
  }
}
.el-table-column {
  color: #333 !important;
}
.column-hot {
  /* background-color: #f15; */
  font-size: 30px;
}
tr {
  border: none !important;
}
td.custom-cell {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  border: none;
  /* height: 40px; */
  /* background-color: #37bc6c; */
}
.wtHolder {
  overflow: normal !important;
}
td.custom-cell-last {
  color: #333;
  border-bottom: none;
}
.htCore {
  overflow: hidden !important;
}
</style>